<template>
    <div class="segmented-control">
        <input type="radio" name="radio2" value="3" id="tabs-11" />
        <label for="tabs-11" class="segmented-control__1">
            <p>页1</p>
        </label>

        <input type="radio" name="radio2" value="4" id="tabs-22" checked />
        <label for="tabs-22" class="segmented-control__2">
            <p>页2</p>
        </label>

        <input type="radio" name="radio2" value="5" id="tabs-33" />
        <label for="tabs-33" class="segmented-control__3">
            <p>页3</p>
        </label>

        <div class="segmented-control__color"></div>
    </div>
</template>
<script>
import { toRefs } from 'vue';
export default {
    setup(props, context) {},
};
</script>
<style lang="less">
/*  SEGMENTED-CONTROL */
.segmented-control {
    width: 20.4rem;
    height: 4rem;
    box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    position: relative;
}

.segmented-control input {
    display: none;
}

.segmented-control > input:checked + label {
    transition: all 0.5s ease;
    color: #2ebb96;
}

.segmented-control__1,
.segmented-control__2,
.segmented-control__3 {
    width: 6.8rem;
    height: 3.6rem;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #9baacf;
    transition: all 0.5s ease;
}

.segmented-control__1:hover,
.segmented-control__2:hover,
.segmented-control__3:hover {
    color: #2ebb96;
}

.segmented-control__color {
    position: absolute;
    height: 3.4rem;
    width: 6.2rem;
    margin-left: 0.3rem;
    border-radius: 0.8rem;
    box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff;
    pointer-events: none;
}

.TagChecked(@n, @i: 0) when (@i =< @n) {
    input:nth-of-type(@{i}):checked ~ .segmented-control__color {
        transform: translateX(@i * 6.8rem - 6.8rem);
        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .TagChecked(@n, (@i + 1));
}

.TagChecked(10);
</style>
